<template>
  <zm-view ref="view" :scroll="false">
    <zm-navbar :border-bottom="false" background="#fff">
      <view class="flex items-center">
        <view class="flex items-center mr-24 transition" @click="toView('pages/utils/select-city/select-city')">
          <text class="font-30 mr-4">{{ cityName || "定位中..." }}</text>
          <u-icon name="arrow-down-fill" size="18rpx"></u-icon>
        </view>
        <u-search placeholder="搜索电影和影院" :show-action="false" height="62rpx" disabled @click="toView('pages/main/search-list/search-list')"></u-search>
      </view>
    </zm-navbar>

    <cinema-filter-bar :default-data="filterForm" @filter="handleFilter"></cinema-filter-bar>

    <view v-if="banners.length" class="px-24 pt-20">
      <u-swiper :list="banners" key-name="imageUrl" height="200rpx" radius="16rpx" indicator-mode="dot" indicator circular @click="onClickBanner"></u-swiper>
    </view>

    <view class="flex-1 pt-20">
      <zm-list ref="list" :options="options" @query="handleGetCinemaList">
        <view v-for="item in list" :key="item.cinemaId" class="mx-20 mb-20">
          <cinema-card-horizontal :data="item" @click="handleClickCinema(item)"> </cinema-card-horizontal>
        </view>
      </zm-list>
    </view>

    <zm-footer safe-area-inset-bottom>
      <view class="address-wrap">
        <view class="flex" :class="{ 'rotate-animation': refreshLocationing }">
          <zm-icon name="replay" color="#999999" @click="handleGetLocation"></zm-icon>
        </view>
        <text class="text-999 text-row-1">我在：{{ location.address }}</text>
      </view>
    </zm-footer>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import { mapGetters, mapActions } from "vuex"
export default {
  mixins: [page],
  data() {
    return {
      activityId: "",
      list: [], // 影院列表
      options: { safeArea: false },
      banners: [], // 轮播图
      hallType: [], // 放映影厅
      cinemaTag: [], // 影院标签
      cinemaLine: [], // 品牌
      regionList: [], // 区域列表
      conditionPlanTime: [], // 开放时间
      refreshLocationing: false, // 刷新位置中
      // 筛选条件
      filterForm: { countyId: "", countyName: "区域", sort: "distance", sortName: "距离近", timeId: "", lineId: "", lineName: "品牌", cinemaTagId: "", hallTypeId: "" }
    }
  },
  computed: {
    ...mapGetters(["cityName", "cityCode", "location"])
  },
  watch: {
    cityCode: {
      handler() {
        this.handleRefresh()
      }
    }
  },
  onLoad(options) {
    this.activityId = options.activityId
  },
  onShow() {
    this.handleRefresh()
  },
  methods: {
    // 刷新数据
    handleRefresh() {
      this.handlePageAdBanner()
      this.handleGetCityCinema()
      this.handleGetCinemaCondition()
      this.$refs.list?.refresh()
      this.$nextTick(() => {
        this.$refs.list.resize()
      })
    },
    handleFilter(data) {
      this.filterForm = uni.$merge(this.filterForm, data)
      this.handleRefresh()
    },
    // 点击影院
    handleClickCinema(item) {
      this.toView({
        url: "pages/cinema/cinema-schedule/cinema-schedule",
        params: { cinemaId: item.cinemaId }
      })
    },
    // 轮播图列表
    async handlePageAdBanner() {
      this.banners = await uni.$api.poster.getPageList({ classification: "2" })
    },
    // 点击页面广告
    onClickBanner(index) {
      this.useAdJump(this.banners[index])
    },
    // 影院信息
    async handleGetCinemaCondition() {
      const res = await uni.$api.cinema.getCinemaCondition()
      this.hallType = res.hallType.map((item) => {
        return { ...item, active: false }
      })
      this.cinemaTag = res.cinemaTag.map((item) => {
        return { ...item, active: false }
      })
      this.cinemaLine = res.cinemaLine.map((item) => {
        return { ...item, active: false }
      })
      this.conditionPlanTime = res.conditionPlanTime.map((item) => {
        return { ...item, active: false }
      })
    },
    // 区域信息
    async handleGetCityCinema() {
      const res = await uni.$api.cinema.getCityCinema()
      this.regionList = res.regionList
    },
    async handleGetCinemaList({ fail, success }) {
      try {
        const res = await uni.$api.cinema.cinemaList({ ...this.filterForm, activityId: this.activityId })
        this.list = res
          .map((item) => {
            return { ...item, distance: uni.$calculateDistance(this.location.latitude, this.location.longitude, item.latitude, item.longitude) }
          })
          .sort((a, b) => {
            if (a.collectionType == 1 && b.collectionType != 1) {
              return -1
            } else if (a.collectionType != 1 && b.collectionType == 1) {
              return 1
            } else {
              return a[this.filterForm.sort] - b[this.filterForm.sort]
            }
          })
        const find = this.list.find((item) => item.cinemaCode == "35010731")
        const findIndex = this.list.findIndex((item) => item.cinemaCode == "35010731")
        if (findIndex && find && find.distance <= 3000) {
          const last = this.list.findLastIndex((item) => item.collectionType == 1)
          this.list.splice(findIndex, 1)
          if (last >= 0 && find.collectionType != 1) {
            this.list.splice(last + 1, 0, find)
          } else {
            this.list.unshift(find)
          }
        }
        this.$nextTick(() => {
          this.$refs.list.resize()
        })
        success({ list: this.list, total: this.list.length })
      } catch (e) {
        fail()
      }
    },
    // 刷新位置
    async handleGetLocation() {
      this.refreshLocationing = true
      await this.getLocation()
      this.refreshLocationing = false
    },
    // 筛选控制-----------
    handleResetFilter() {
      this.cinemaTag.forEach((item) => (item.active = false))
      this.cinemaLine.forEach((item) => (item.active = false))
      this.hallType.forEach((item) => (item.active = false))
      this.conditionPlanTime.forEach((item) => (item.active = false))
      this.filterForm = {
        countyId: "",
        countyName: "全部地区",
        sort: "distance",
        sortName: "距离近",
        timeId: "",
        lineId: "",
        cinemaTagId: "",
        hallTypeId: ""
      }
      this.handleConfirmFilter()
    },
    handleConfirmFilter() {
      this.$refs.list.refresh()
      this.$refs.dropdown.close()
    },
    // 点击下拉区域
    handleClickRegionBtn(item) {
      this.filterForm.countyId = item ? item.regionId : ""
      this.filterForm.countyName = item ? item.regionName : "全部地区"
      this.$forceUpdate()
      this.handleConfirmFilter()
    },
    // 点击距离排序
    handleClickSortBtn(type) {
      const types = { distance: "距离近", lowTicket: "价格低" }
      this.filterForm.sort = type
      this.filterForm.sortName = types[type]
      this.handleConfirmFilter()
    },
    // 点击开放时间
    handleClickTimeBtn(index) {
      this.$set(this.conditionPlanTime[index], "active", !this.conditionPlanTime[index].active)
      this.filterForm.timeId = this.conditionPlanTime
        .filter((item) => item.active)
        .map((item) => item.timeId)
        .join()
    },
    // 点击品牌
    handleClickLineBtn(index) {
      this.$set(this.cinemaLine[index], "active", !this.cinemaLine[index].active)
      this.filterForm.lineId = this.cinemaLine
        .filter((item) => item.active)
        .map((item) => item.lineId)
        .join()
    },
    // 点击标签
    handleClickTagBtn(index) {
      this.$set(this.cinemaTag[index], "active", !this.cinemaTag[index].active)
      this.filterForm.cinemaTagId = this.cinemaTag
        .filter((item) => item.active)
        .map((item) => item.cinemaTagId)
        .join()
    },
    handleClickHallTypeBtn(index) {
      this.$set(this.hallType[index], "active", !this.hallType[index].active)
      this.filterForm.hallTypeId = this.hallType
        .filter((item) => item.active)
        .map((item) => item.hallTypeId)
        .join()
    },
    // ------------------
    ...mapActions(["getLocation"])
  }
}
</script>

<style lang="scss" scoped>
.cinema-item {
  display: flex;
  margin: 20rpx;
  margin-top: 0;
  padding: 30rpx 20rpx;
  background: #ffffff;
  border-radius: 16rpx;
  flex-direction: column;

  .tag-badge {
    height: 28rpx;
    font-size: 18rpx;
    padding: 2rpx 6rpx;
    border-radius: 6rpx;
    display: flex;
    color: $theme-color;
    align-items: center;
    border: 1rpx solid $theme-color;
  }
}

.address-wrap {
  display: flex;
  column-gap: 6rpx;
  align-items: center;
  padding: 12rpx 24rpx;
  background-color: #f5f5f5;
}

.filter-btn {
  height: 60rpx;
  padding: 0 12rpx;
  overflow: hidden;
  text-align: center;
  line-height: 60rpx;
  border-radius: 6rpx;
  background-color: #f4f6f7;

  &.is-active {
    color: $theme-color;
    background-color: $theme-color-1;
  }
}

.test-view {
  width: 100%;
  height: 50rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

::v-deep .u-swiper__indicator {
  right: 24rpx;
  bottom: 12rpx;

  .u-swiper-indicator__wrapper__dot {
    width: 28rpx;
    height: 4rpx;
    margin: 0 4rpx;
    border-radius: 2rpx;
  }
}
</style>
